<template>
	<view>
		<u-popup v-model="show" mode="bottom" height="auto" :closeable="true">
			<view class="title">
				选择规格
			</view>
			<view class="flex-btw shart">
				<view class="shart_info" @click="shart">
					<image class="shart_info_img" src="../../static/images/wx.png"></image>
					<view class="shart_info_text">微信</view>
				</view>
				<view class="shart_info">
					<image class="shart_info_img" src="../../static/images/friends.png"></image>
					<view class="shart_info_text">朋友圈</view>
				</view>
				<view class="shart_info">
					<image class="shart_info_img" src="../../static/images/qq.png"></image>
					<view class="shart_info_text">QQ</view>
				</view>
				<view class="shart_info">
					<image class="shart_info_img" src="../../static/images/wp.png"></image>
					<view class="shart_info_text">微博</view>
				</view>
			</view>
			<view class="button" @click="cancel">
				取消分享
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			show: false
		};
	},
	methods: {
		// 打开
		open() {
			this.show = true
		},
		// 关闭
		cancel() {
			this.show = false
		},
		// 分享
		shart(){
			
		},
	}
}
</script>

<style lang="scss">
.title {
	margin-top: 30rpx;
	text-align: center;
	font-size: 32rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #333333;
}

.shart {
	padding: 60rpx;
	box-sizing: border-box;

	&_info {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		&_img {
			width: 140rpx;
			height: 140rpx;
		}

		&_text {
			margin-top: -20rpx;
			font-size: 26rpx;
			font-family: PingFang SC;
			color: #8B8A99;
		}
	}
}

.button {
	width: 630rpx;
	height: 90rpx;
	border-radius: 45rpx;
	margin: 20rpx auto 30rpx;
	text-align: center;
	line-height: 90rpx;
	border: 2px solid #CCCCCC;
	font-size: 30rpx;
	font-family: PingFang SC;
	color: #333333;
}</style>